import { useState } from "react";
import styles from './index.less';
import { Button, Flex } from "antd";
import { motion, AnimatePresence } from 'motion/react';

export default () => {

    const [size, setSize] = useState<'s' | 'm' | 'b'>('s');
    const [listOpen, setListOpen] = useState<'open' | 'close'>('open');
    const [listOpen2, setListOpen2] = useState<'open' | 'close'>('open');
    const [listOpen3, setListOpen3] = useState<'open' | 'close'>('open');

    const listVariants = {
        open: {
            width: 140,
            height: 150,
            borderRadius: 16,
            backgroundColor: '#9933FA',
        },
        close: {
            width: 40,
            height: 150,
            borderRadius: 8,
            backgroundColor: '#2E8B57',
        },
    };

    const itemVariants = {
        open: { x: 0, },
        close: { x: -44, },
    };

    const listVariants2 = {
        open: {
            width: 140,
            height: 150,
            borderRadius: 16,
            backgroundColor: '#9933FA',
            transition: {
                when: "beforeChildren",
                staggerChildren: 0.1,
            },
        },
        close: {
            width: 40,
            height: 150,
            borderRadius: 8,
            backgroundColor: '#2E8B57',
            transition: {
                when: "afterChildren",
            },
        },
    };

    const itemVariants2 = {
        open: {
            x: 0,
            transition: {
                duration: 0.2,
            },
        },
        close: {
            x: -44,
            transition: {
                duration: 0.2,
            },
        },
    };

    const listVariants3 = {
        open: {
            width: 140,
            height: 150,
            borderRadius: 16,
        },
        close: {
            width: 0,
            height: 150,
            borderRadius: 4,
            transition: {
                when: "afterChildren",
            },
        },
    };

    const itemVariants3 = {
        open: (i: number) => ({
            rotateY: 0,
            transition: {
                duration: 0.5,
                delay: i * 0.2,
            },
        }),
        close: (i: number) => ({
            rotateY: 90,
            transition: {
                duration: 0.5,
                delay: i * 0.2,
            },
        }),
    };

    return (
        <div className={styles.container}>
            <div className={styles.card}>
                <p>Variants变种</p>

                <Flex gap="small" wrap align="center">
                    <Button
                        size="small"
                        onClick={() => {
                            setSize('b');
                        }}
                    >大</Button>
                    <Button
                        size="small"
                        onClick={() => {
                            setSize('m');
                        }}
                    >中</Button>
                    <Button
                        size="small"
                        onClick={() => {
                            setSize('s');
                        }}
                    >小</Button>
                </Flex>

                <motion.div
                    className={styles.motionView}
                    animate={size}
                    variants={{
                        s: {
                            scale: 0.5,
                            rotate: 360,
                            borderRadius: '50%',
                            backgroundColor: '#2E578B',
                        },
                        m: {
                            scale: 0.9,
                            rotate: 0,
                            borderRadius: '30%',
                            backgroundColor: '#2E8B57',
                        },
                        b: {
                            scale: 1.2,
                            rotate: -360,
                            borderRadius: '10%',
                            backgroundColor: '#9933FA',
                        },
                    }}
                    transition={{ duration: 1, ease: "backInOut" }}
                >
                    M
                </motion.div>
            </div>

            <div className={styles.card}>
                <p>Propagation传播</p>

                <Button
                    onClick={() => {
                        setListOpen(listOpen === 'close' ? 'open' : 'close');
                    }}
                >
                    {listOpen ? "列表关闭" : "列表打开"}
                </Button>

                <AnimatePresence>
                    <motion.div
                        className={styles.motionView}
                        variants={listVariants}
                        animate={listOpen}
                    >
                        <motion.li variants={itemVariants}>{`list item`}<span style={{ marginLeft: 20 }}>1</span></motion.li>
                        <motion.li variants={itemVariants}>{`list item`}<span style={{ marginLeft: 20 }}>2</span></motion.li>
                        <motion.li variants={itemVariants}>{`list item`}<span style={{ marginLeft: 20 }}>3</span></motion.li>
                        <motion.li variants={itemVariants}>{`list item`}<span style={{ marginLeft: 20 }}>4</span></motion.li>
                    </motion.div>
                </AnimatePresence>
            </div>

            <div className={styles.card}>
                <p>Orchestration编排</p>

                <Button
                    onClick={() => {
                        setListOpen2(listOpen2 === 'close' ? 'open' : 'close');
                    }}
                >
                    {listOpen2 ? "列表关闭" : "列表打开"}
                </Button>

                <AnimatePresence>
                    <motion.div
                        className={styles.motionView}
                        variants={listVariants2}
                        animate={listOpen2}
                    >
                        <motion.li variants={itemVariants2}>{`list item`}<span style={{ marginLeft: 20 }}>1</span></motion.li>
                        <motion.li variants={itemVariants2}>{`list item`}<span style={{ marginLeft: 20 }}>2</span></motion.li>
                        <motion.li variants={itemVariants2}>{`list item`}<span style={{ marginLeft: 20 }}>3</span></motion.li>
                        <motion.li variants={itemVariants2}>{`list item`}<span style={{ marginLeft: 20 }}>4</span></motion.li>
                    </motion.div>
                </AnimatePresence>
            </div>

            <div className={styles.card}>
                <p>动态Variants</p>

                <Button
                    onClick={() => {
                        setListOpen3(listOpen3 === 'close' ? 'open' : 'close');
                    }}
                >
                    {listOpen3 ? "列表关闭" : "列表打开"}
                </Button>

                <AnimatePresence>
                    <motion.div
                        className={styles.motionView}
                        variants={listVariants3}
                        animate={listOpen3}
                    >
                        <motion.li variants={itemVariants3} custom={1}>{`list item 1`}</motion.li>
                        <motion.li variants={itemVariants3} custom={2}>{`list item 2`}</motion.li>
                        <motion.li variants={itemVariants3} custom={3}>{`list item 3`}</motion.li>
                        <motion.li variants={itemVariants3} custom={4}>{`list item 4`}</motion.li>
                    </motion.div>
                </AnimatePresence>
            </div>
        </div>
    );
}